<template>
  <Navbar />
  <scroll-view
    class="scroll-view"
    scroll-y
    refresher-enabled
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="isTriggered"
    @scrolltolower="onScrolltolower"
  >
    <Skeleton v-if="isLoading"/>
    <template v-else>
      <YmSwiper :bannerList="bannerList" />
      <Category :categoryList="categoryList" />
      <HotPanel :hotPanelList="hotPanelList" />
      <YmLike ref="ymLike" />
    </template>
    
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Navbar from './components/navbar.vue'
import { getHomeSwiper, getCategory, getHotPanel } from '@/services/home'
import type { BannerType, CategoryType, HotType } from '@/types/home'
import Category from './components/category.vue'
import HotPanel from './components/hotPanel.vue'
import Skeleton from './components/skeleton.vue'

const bannerList = ref<BannerType[]>()
const imgInit = () => {
  getHomeSwiper().then((res) => {
    bannerList.value = res.result
  })
}

const categoryList = ref<CategoryType[]>()
const categoryInit = () => {
  getCategory().then((res) => {
    categoryList.value = res.result
  })
}
const hotPanelList = ref<HotType[]>()
const hotPanelInit = () => {
  getHotPanel().then((res) => {
    hotPanelList.value = res.result
  })
}
// 获取猜你喜欢的组件
const ymLike = ref()
// 下拉刷新
const isTriggered = ref(false)
// 触发下拉刷新
const onRefresherrefresh = () =>{
  isTriggered.value = true
  // 重置猜你喜欢的组件
  ymLike.value.resetData()
  imgInit()
  categoryInit()
  hotPanelInit()
  // 关闭动画
  isTriggered.value = false
}
// 猜你喜欢组件触底滚动事件
const onScrolltolower = () => {
  ymLike.value?.getMore()
}

// 骨架屏显示
const isLoading = ref(false)
onMounted(() => {
  isLoading.value = true
  Promise.all([imgInit(),categoryInit(),hotPanelInit()]).then(()=>{
    isLoading.value = false
  })
  
})
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  flex: 1;
}
</style>
